<template>
    <video src="../data/東京のリアル都市風景 003.mp4" class="background" autoplay loop muted>
    </video>
    <div class="logo">
        <img src="../assets/地球.png" alt="">
        <h1>光谷智慧交通系统</h1>
    </div>
    <el-card class="container">
        <h1>登录账号</h1>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-position="left" class="demo-ruleForm">
            <el-form-item label="用 户:" prop="username">
                <el-input v-model="ruleForm.username" :prefix-icon="User" />
            </el-form-item>
            <el-form-item label="密 码:" prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock" />
            </el-form-item>
            <el-form-item label="类 型:" prop="type">
                <el-radio-group v-model="ruleForm.type">
                    <el-radio label="common" default>普通用户</el-radio>
                    <el-radio label="traffic">交管部门</el-radio>
                    <el-radio label="admin">管理员</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="confirm">
                <el-checkbox label="我已阅读并知晓用户协议和隐私政策" v-model="ruleForm.confirm" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn">登录</el-button>
            </el-form-item>
        </el-form>
        <el-link @click="$router.push('/register')">
            <el-icon color="#409EFC">
                <Avatar />
            </el-icon>
            注册用户
        </el-link>
    </el-card>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { User, Lock, Avatar } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';
import { users } from '../config/users'
const $router = useRouter()
import { useMenuStore } from '../store/index'
const $store = useMenuStore()

const ruleFormRef = ref<FormInstance>()

const checkName = (rule: any, value: any, callback: any) => {
    if (value === '') {
        return callback(new Error('请输入用户名!'))
    } else {
        callback()
    }
}

const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码!'))
    } else {
        callback()
    }
}

const checkConfirm = (rule: any, value: any, callback: any) => {
    if (value === false) {
        return callback(new Error('请勾选用户协议!'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    username: '',
    password: '',
    type: 'common',
    confirm: false,
})

const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{ validator: checkName, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
    confirm: [{ validator: checkConfirm, trigger: 'change' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
            const user = users.find(u => u.username === ruleForm.username && u.password === ruleForm.password && u.type === ruleForm.type)
            if (user) {
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                })
                const mockToken = btoa(`${user.username}:${user.type}:${Date.now()}`)
                localStorage.setItem("token", mockToken);
                localStorage.setItem("username", user.username)
                localStorage.setItem("type", user.type)
                $store.setUsername(user.username)
                $store.setUserType(user.type)
                $router.push({
                    path: '/',
                })
            } else {
                ElMessage({
                    message: '用户名、密码或用户类型错误',
                    type: 'warning',
                })
            }
        } else {
            console.log('error submit!')
            return false
        }
    })
}

</script>
<style lang="scss" scoped>
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    object-fit: cover;
}

.logo {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 450px;
    height: 80px;
    margin: 130px auto;
    margin-bottom: 0px;

    img {
        width: 80px;
        height: 80px;
        border-radius: 9999px;
        box-shadow: 3px 3px 5px 2px rgb(12, 127, 189);
    }

    h1 {
        text-align: center;
        font-size: 40px;
        color: #fff;
        font-weight: 600;
        margin-top: 6px;
        margin-bottom: 20px;
        line-height: 80px;
        text-shadow: 5px 5px 5px rgb(12, 127, 189);
    }
}

.container {
    width: 450px;
    margin: 30px auto;
    border-radius: 10px;
    padding: 10px 20px;

    h1 {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        margin-top: 6px;
        margin-bottom: 20px;
    }

    .btn {
        width: 100%;
        padding: 10px;
        border-radius: 3px;
    }

    .btn:hover {
        background-color: #006dff;
        opacity: 1;
    }
}
</style>
  